화면의 동작과 업무 구현을 위한 공통 라이브러리

syn.js 기능을 작업 목적에 맞춰 찾고, 실제 프로젝트의 사용 위치를 확인합니다.

HandStack 프론트엔드 개발의 핵심

QCN

학습 목표

  • HandStack의 화면 개발에 사용되는 핵심 syn.js 공통 라이브러리에 대해 알아봅니다.
  • syn.js 라이브러리는 외부 종속성이 없는 독립적인 구조로, 가볍고 빠른 웹 애플리케이션 개발을 지원합니다.
  • 주요 기능들을 살펴보고 어떻게 활용할 수 있는지 알아봅니다.
QCN

syn.js: 유틸리티 라이브러리 (1)

  • 필요한 작업의 약어를 찾고 샘플에서 호출 결과를 확인합니다.
약어 파일명 설명
syn.$b syn.browser.js 브라우저 정보 확인 기능 제공
syn.$m syn.manipulation.js DOM (Document Object Model) 조작 기능 제공
syn.$d syn.dimension.js HTML Element 크기, 위치 제어 기능 제공
syn.$c syn.cryptography.js base64, sha256 및 암호화 기능 제공
syn.$k syn.keyboard.js 키보드 단축키 기능 제공
syn.$v syn.vaildation.js 유효성 검사 기능 제공
QCN

syn.js: 유틸리티 라이브러리 (2)

  • 화면 개발과 업무 로직 처리에 특화된 기능들을 제공합니다.
약어 파일명 설명
syn.$l syn.library.js 공통 라이브러리 기능 제공
syn.$w syn.webform.js 화면 개발 및 거래 업무 기능 제공
syn.$r syn.request.js http 요청 및 URL, Cookie 조작 기능 제공
syn.$n syn.network.js iframe 화면과 서버 간에 양방향 통신 기능을 제공
syn.$p syn.print.js PDF 문서를 이용한 인쇄 기능을 제공
QCN

기본 타입 확장 기능

  • syn.extension.js 파일은 자바스크립트의 기본 데이터 타입을 확장하여 개발 편의성을 높여줍니다.

  • 날짜·배열·문자열 등 입력 타입에 맞는 도우미를 선택합니다.

확장 객체 설명
$date 날짜 관련 포매팅 및 계산 기능 제공
$array 배열 조작 및 유틸리티 기능 제공
$string 문자열 조작 및 유틸리티 기능 제공
$number 숫자 포매팅 및 계산 기능 제공
$object 객체 조작 및 유틸리티 기능 제공
QCN

소스 위치와 번들링

  • syn.js 관련 모든 소스 코드는 아래 경로에서 확인할 수 있습니다.
  • HandStack은 빌드 시점에 이 소스들을 하나의 파일로 묶어(Bundling) 로딩 성능을 최적화합니다.
$(HANDSTACK_SRC)/1.WebHost/ack/wwwroot/assets/src
  • 소스를 직접 분석하고 수정하여 프로젝트에 필요한 기능을 추가하거나 변경할 수 있습니다.
QCN

잠깐, 구분해 보기

날짜 포맷과 서버 거래 호출은 같은 라이브러리에서 찾을까요?

QCN

핸즈온: syn.js 사용 현황 분석 (1/2)

  • handstack synusage CLI 도구를 사용하여 프로젝트 내에서 syn.js 함수들이 어떻게 사용되고 있는지 분석할 수 있습니다.

  • functions: syn.js 함수 사용 현황

  • uicontrols: syn.uicontrols.js 함수 사용 현황

%HANDSTACK_HOME%\tools\handstack\handstack synusage --directory="%HANDSTACK_HOME%\contracts\wwwroot\HDS" --value=functions
QCN

핸즈온: syn.js 사용 현황 분석 (2/2)

  • 로컬 샘플: http://localhost:8421/sample/syn (로컬 서버 실행 후 확인)
QCN

라이브러리 활용의 기준

  • 브라우저·DOM·보안·이벤트·거래 등 작업에 맞는 약어를 찾습니다.
  • 기본 타입 도우미와 UI 컨트롤을 구분합니다.
  • synusage 결과의 호출 한 곳을 샘플·소스와 대조합니다.
QCN

발표: 첫 화면의 목표를 말한 뒤 핵심 개념과 예제로 진행합니다. 확인 질문 뒤에는 답할 시간을 주고, 마지막 완료 기준을 남겨 질문을 받습니다. 발표 구성 참고: MIT OpenCourseWare, Patrick Winston, How to Speak (2018), https://ocw.mit.edu/courses/res-tll-005-how-to-speak-january-iap-2018/pages/how-to-speak/

질문 후 잠시 기다립니다. 답이 없으면 앞에서 본 예제를 다시 가리킵니다. 확인할 답: 기본 타입 도우미 $date와 화면·거래 기능 syn.$w를 구분해 찾습니다. 다음 주제로 넘어가기 전에 차이를 청중의 표현으로 한 번 확인합니다.

질문을 받는 동안 이 확인 기준을 화면에 남깁니다. 청중이 자신의 업무에 적용할 다음 행동 하나를 고르게 합니다.